<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-input-search placeholder="姓名/手机号" v-model="params.key" @search="onSearch" style="width:400px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
                    <a-button type="primary" icon="plus" @click="onEdit(0)">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="createAt" slot-scope="text,record,index">
                    {{moment(record.createAt).format('YYYY_-MM-DD HH:mm:ss')}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a v-if="baseUtil.isBlank(record.wxUserId)" @click="onBindWeiXin(record)"  class="ant-btn-text">绑定微信</a>
                    <a v-else @click="onRelieveWeiXin(record)"  class="ant-btn-text">解绑微信</a>
                    <a-divider type="vertical" />
                    <a @click="onEdit(record.id)"  class="ant-btn-text"><a-icon type="form" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
        <a-modal title="扫码绑定微信" :visible.sync="dialogQrCodeVisible" :cancel="handleCancel" width="300px" >
            <a-spin :spinning="qrLoading">
            <div class="bindQrcodeBox" v-if="dialogQrCodeVisible" >
                <div id="bindQrcode" ref="qrcode"><img :src="qrImageUrl" /></div>
                <div class="qrcode-timeout" v-if="isSuccess === -1" @click="reloadQrCode"><span>已失效</span></div>
                <div class="default_tips" v-if="isSuccess === -1">二维码已失效,请点击图片刷新</div>
                <div class="default_tips" v-else-if="isSuccess === 1">扫码成功,请点击确认绑定</div>
                <div class="default_tips" v-else-if="isSuccess === 2">绑定成功</div>
                <div class="default_tips" v-else>请扫描二维码</div>
            </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
    import {findRiderList,deleteRider,resetPassword,generateQrCode,relieveQrCode,checkWxBind} from "../../api/user";
    import {fmMoney} from "../../utils";
    import moment from 'moment'
    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '姓名',dataIndex: 'name',width: 150,align:'center'},
        {title: '手机号',dataIndex: 'phone',width: 150,align:'center'},
        {title: '注册时间',dataIndex: 'createAt',width: 150,align:'center',scopedSlots: { customRender: 'createAt' }},
        {title: '操作',key: 'operation',align:'center',width: 120,scopedSlots: { customRender: 'operation' }}];
    export default {
        data() {
            return {
                columns,
                dataList: [],
                params:{
                    key:'',
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                total:0,
                loading:false,
                qrLoading:false,
                dialogQrCodeVisible:false,
                qrUser:{},
                qrImageUrl:'',
                isSuccess:0 // 二维码状态  -1 失效  0 等待扫码 1 已扫码,等待确认 2 ok
            }
        },
        methods: {
            moment,
            fmMoney,
            onSearch(){
                this.params.current = 1;
                this.getList();
            },
            onChange(current){
                this.params.current = current;
                this.getList();
            },
            handleCancel(){
                this.qrUser = {}
                this.dialogQrCodeVisible = false
            },
            //绑定微信
            onBindWeiXin(row){
                this.qrUser = row
                this.generateQrCode()
                console.log("row绑定微信",row);

              let _this = this,count = 0,
                t = setInterval(function () {
                  if(_this.dialogQrCodeVisible == false){
                    clearInterval(t);
                  }
                  count++;
                  _this.checkBind(row,count,t);

                },2000);
            },
            async checkBind(row,count,t){
                let resp = await checkWxBind(row.id)
                let result = false
                if(this.qUtil.validResp(resp)){
                    result = resp.data
                }
                if(!result) {
                    if (count >= 10) {
                        clearInterval(t);
                        //销毁二维码
                        this.isSuccess = -1;
                    }
                }
            },
            onRelieveWeiXin(row) {
                const that = this;
                this.$confirm({
                    title: '确认解除骑手[' + row.name + ']的微信绑定吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        that.handleRelieve(row);
                    }, onCancel() {
                    },
                })
            },
            async handleRelieve(row){
                this.loading = true;
                let resp = await relieveQrCode(row.id);
                this.loading = false;
                if(this.qUtil.validResp(resp)){
                    this.$message.success('骑手['+row.name+']已解绑微信');
                }else{
                    this.$message.error(resp.errMsg|| '解绑失败')
                }
            },
            async generateQrCode() {
                let resp = await generateQrCode(this.qrUser.id);
                if(this.qUtil.validResp(resp)){
                    this.qrImageUrl = resp.data
                }
                console.log("resp==>绑定",resp)
            },
            //重新渲染二维码
            reloadQrCode(){
                this.isSuccess = 0;
                this.generateQrCode();
            },
            //编辑
            onEdit(id){
                this.$router.push({name:'RiderEdit',query:{id:id}});
            },
            onResetPassword(id){
                let _this = this;
                this.$confirm({
                    title: '此操作将重置该用户账号密码为初始密码,确认执行吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleResetPassword(id);},
                    onCancel() {},
                });
            },
            async handleResetPassword(id){
                let resp = await resetPassword(id);
                if(this.qUtil.validResp(resp)) {
                    this.$success({title:'密码已重置',okText:'确定'});
                    this.getList();
                }
            },
            //删除
            onDeleted(id){
                let _this = this;
                this.$confirm({
                    title: '确认删除该骑手吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleteRider(id);
                if(this.qUtil.validResp(resp)) {
                    this.$success({title:'删除成功!',okText:'确定'});
                    this.getList();
                }
            },
            async getList(){
                this.loading = true;
                let resp = await findRiderList(this.params);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.total = resp.data.total;
                this.dataList = resp.data.dataList;
                console.log("==dataList",this.dataList);
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>
<style>

</style>
